<template>
	<div class="main">
		<div class="title">
			Statistic By Virus
		</div>

		<div class="content">
			<div class="left">
				<div :class="['item', qury.virusSpecies === n.virus_species ? 'active': '']" v-for="(n, idx) in species" :key="idx" @click="speciesClick(n)">
					{{n.virus_species}}
				</div>
			</div>
			<div class="right">
				<div v-loading="loading" id="chartId" style="width: 100%;height: 400px" />
			</div>
		</div>
	</div>
</template>

<script>
  import {getVirusStatistic} from "@/api/statistic";
  import {getAllSpecies} from "../../api/statistic";

  export default {
    name: "virus",
    data() {
      return {
        species: [],
				list: [],
				chart: null,
				qury: {
          virusSpecies: 'All the virus'
				},
        loading: false,
			}
    },
    mounted() {

      this.initChart()
      this.loadSpeciesData()
      this.getVirusTotalBySpecies()
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(document.getElementById('chartId'))
      },
      async loadSpeciesData() {
        const res = await getAllSpecies()
				if (res) {
          res.data.unshift({virus_species: 'All the virus', isAll: true})
				}
				this.species = res.data
			},
			setOptions(data) {
        let xArr = ['mRNA', 'lncRNA', 'circRNA', 'sRNA'];
        let yArr = [0, 0, 0, 0]
        data.map(n => {
          let idx = xArr.indexOf(n.rna_type)
          if (idx > -1) {
            yArr[idx] = n.num
					}
				})

        let option = {
          title: {
            text: 'Numbers of RNA types in ' + this.qury.virusSpecies,
						left: 'center'
          },
          xAxis: {
            type: 'category',
            data: xArr,
						name: 'RNA type'
          },
          color: ['#11427d'],
          yAxis: {
            type: 'value',
            name: 'Numbers',
            // nameGap: '30',
            // nameLocation:"center",
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisLabel: {
              show: true, // 不显示坐标轴上的文字
            },

          },
          //头部显示
          label: {
            show: true,
            position: 'top',
            color: '#11427d',
          },
          series: [
            {
              data: yArr,
              type: 'bar'
            }
          ]
        };
        this.chart.setOption(option)
			},
      speciesClick(n) {
        this.qury.virusSpecies = n.virus_species
        this.getVirusTotalBySpecies(this.qury.virusSpecies === 'All the virus' ? null : n.virus_species)
			},
      async getVirusTotalBySpecies(specie) {
        this.loading = true
        const res = await getVirusStatistic({virusSpecies: specie})
				if(res) {
				  this.setOptions(res.data)
				}
        this.loading = false
      }
    }
  }
</script>

<style lang="stylus" scoped>

	.main {
		width 1170px
		margin-top 20px
		padding-top 10px
		font-family: Times New Roman;

		.title {
			font-size 28px
			text-align left
			margin-bottom 20px
			padding 15px 0
			color #11427D
			font-weight 800
		}

		.content {
			display flex
			flex 1
			min-height 250px
			height: calc(100vh - 320px);

			.left {
				width: 360px;
				transition: padding-top .3s;
				overflow hidden

				.item {
					padding 15px
					margin-right 10px
					color #0064bc
					font-size 15px
					cursor pointer
				}

				.active, .item:hover {
					background-color #f9f9f9
					color #9c1919
					text-decoration underline
					border-radius 8px
				}
			}

			.left:hover {
				overflow-y: auto;
			}

			/* 滚动条整体部分 */
			.left::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}

			.right /deep/ {
				flex 1
				padding 0 30px
				box-sizing: border-box;

				//设置图标颜色
				.el-loading-spinner .path {
					stroke: #11427D;
				}
			}
		}
	}
</style>
